<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>省份列表</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  <script type="text/javascript">
    function deleteGoodsType(element) {
      const pid = element.getAttribute('data-pid');
      const pname = element.getAttribute('data-pname');

      if (confirm("确定要删除 " + pname + " 的记录吗？")) {
        window.location.href = '/shopping/province/delete?pid=' + pid;
      }
    }
  </script>
</head>

<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <div th:replace="~{header}">
    </div>
  </div>
</div>
<br><br>
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">省份列表</h3>
    </div>

    <div class="panel-body">

      <div>
        <button onclick="location.href='/shopping/province/add';return false;">增加省份</button>
        <br><br>
      </div>
      <div class="table table-responsive">
        <table id="tb" class="table table-bordered table-hover">
          <tbody class="text-center">
          <tr>
            <th>序号</th>
            <th>省份编号</th>
            <th>省份名称</th>
            <th>删除</th>
          </tr>
          <tr th:each="province,status:${provinces}">

            <td><span th:text="${status.count}"></span></td>
            <td>
              <a th:href="@{/province/edit(pid=${province.pid})}"
                 th:text="${province.pid}"></a>
            </td>
            <td>
              <a th:href="@{/province/edit(pid=${province.pid})}"
                 th:text="${province.pname}"></a>
            </td>
            <td>
              <a href="#" th:attr="data-pid=${province.pid}, data-pname=${province.pname}"
                 onclick="deleteGoodsType(this)">删除</a>
            </td>

          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</div>
</body>

</html>